<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginForm"
           :model="loginForm"
           label-width="0">
    <el-form-item prop="username">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.username"
                auto-complete="off"
                :placeholder="$t('login.username')">
        <i slot="prefix" class="el-icon-message"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                :type="passwordType"
                v-model="loginForm.password"
                auto-complete="off"
                :placeholder="$t('login.password')">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
        <i slot="prefix" class="icon-mima"/>
      </el-input>
    </el-form-item>
    <el-form-item v-if="this.website.captchaMode" prop="code">
      <el-row :span="24">
        <el-col :span="16">

          <el-input size="small"
                    @keyup.enter.native="handleLogin"
                    v-model="loginForm.code"
                    auto-complete="off"
                    :placeholder="$t('login.code')">
            <i slot="prefix" class="icon-yanzhengma"/>
          </el-input>
        </el-col>
        <el-col :span="8">
          <div class="login-code">
            <img :src="loginForm.image" class="login-code-img" @click="refreshCode"
            />
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
                 size="small"
                 @click.native.prevent="handleLogin"
                 class="login-submit">{{$t('login.submit')}}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {mapGetters} from "vuex";
  import {info} from "@/api/system/tenant";
  import {getCaptcha} from "@/api/user";
  import {getTopUrl} from "@/util/util";
  import {OC_LOGIN_URL, BC_LOGIN_URL} from "@/const/urlConst"
  import { clearWebSocket } from "@/util/ws";
  import {EventBus} from "../../api/business/EventBus ";

  export default {
    name: "userlogin",
    data() {
      return {
        warning: false,
        tenantMode: this.website.tenantMode,
        loginForm: {
          //租户ID
          // tenantId: "000000",
          //用户名
          username: "",
          //密码
          password: "",
          //账号类型
          type: "account",
          //验证码的值
          code: "",
          //验证码的索引
          key: "",
          //预加载白色背景
          image: "",
          oc: false//是否为oc
        },
        loginRules: {
          username: [
            {required: true, message: "请输入邮箱", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
          ]
        },
        passwordType: "password"
      };
    },
    created() {
      this.getTenant();
      this.refreshCode();
      if(this.$route.query.offerId){
        this.loginForm.oc = true
        this.loginForm.offerId = this.$route.query.offerId
        //根据 用户名获取 用户密码
      }else {
        this.loginForm.oc = false;
        if (OC_LOGIN_URL.startsWith(window.location.origin)) {
          window.location.href = BC_LOGIN_URL;
        }
      }
    },
    mounted() {
      let loginUserInfo = window.localStorage.getItem('beetlesLoginUserInfo');
      if(loginUserInfo) {
        let loginUserInfoObj = JSON.parse(loginUserInfo);
        this.loginForm.username = loginUserInfoObj.username || '';
        this.loginForm.password = loginUserInfoObj.password || '';
      }
      clearWebSocket();
    },
    computed: {
      ...mapGetters(["tagWel"])
    },
    props: [],
    methods: {
      refreshCode() {
        getCaptcha().then(res => {
          const data = res.data;
          this.loginForm.key = data.key;
          this.loginForm.image = data.image;
        })
      },
      showPassword() {
        this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
      },
      handleLogin() {
        // let notChrome
        // let userAgent = navigator.userAgent
        // if ( userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Edg") !== -1) {
        //   notChrome = true
        // }else if (userAgent.indexOf("Chrome") > -1){
        //   notChrome = false
        // }else {
        //   notChrome = true
        // }
        // let ipCity = returnCitySN["cname"];
        // let isvpn = ipCity !== 'CHINA'
        // if (notChrome === true || isvpn === true) {
          // this.warning = true
          // EventBus.$emit("child",this.warning);
       // }
        window.sessionStorage.setItem('vpn', 'true');
        this.$refs.loginForm.validate(valid => {
          this.loginForm.username = this.loginForm.username.trim()
          this.loginForm.password = this.loginForm.password.trim()
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '登录中,请稍后。。。',
              spinner: "el-icon-loading"
            });
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              //先一步获取 菜单 跳转主页在进行菜单覆盖 （预防因网络问题 获取不到菜单 导致404）
              this.$store.dispatch("GetMenu").then(data => {
                if (data.length !== 0) {
                  this.$router.$avueRouter.formatRoutes(data, true);
                }
              })
              window.localStorage.setItem('beetlesLoginUserInfo', JSON.stringify({username:this.loginForm.username,password:this.loginForm.password}));
              if(this.loginForm.oc === false){
                this.$router.push({path: this.tagWel.value})
              }else{
                this.$router.push({path: this.tagWel.value,query:{offerId:this.$route.query.offerId,name:this.$route.query.name}});
              }

              loading.close();
            }).catch(() => {
              loading.close();
              this.refreshCode();
            });
          }
        });
      },
      getTenant() {
        let domain = getTopUrl();
        // 临时指定域名，方便测试
        //domain = "https://bladex.vip";
        info(domain).then(res => {
          const data = res.data;
          if (data.success && data.data.tenantId) {
            this.tenantMode = false;
            this.loginForm.tenantId = data.data.tenantId;
            this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
          }
        })
      },

    }
  };
</script>

<style>
</style>
